<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
        <title>EasyRTC Demo: Instant Messaging + Rooms </title>
        <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />

        <!--hide-->
        <link rel="stylesheet" type="text/css" href="css/landing.css" />

        <!-- Prettify Code -->
        <script type="text/javascript" src="js/prettify/prettify.js"></script>
        <link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />
        <script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
        <script type="text/javascript" src="js/prettify/jquery.min.js"></script>
        <!--show-->
        <!-- Assumes global locations for socket.io.js and easyrtc.js -->
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
        <script type="text/javascript" src="js/demo_instant_messaging_rooms.js"></script>
        <!--hide-->
        <!-- Styles used within the demo -->
        <style type="text/css">
            #stuffToSend {
                width:300px;
            }
            #sendMessageArea{
                float:left;
                width:400px;
                padding-right:20px;
            }
            #sendMessageText{
                width:100%;
            }
            #conversation {
                height:150px;
                border:solid 1px gray;
                overflow-y:scroll;
            }
            .roomDiv {
                margin-bottom: 15px;
                background-color: antiquewhite;
            }
            .roomOccupants{
                margin-left: 20px;
            }
            #main.connected>.preconnection{
                display:none;
            }
            #main.notconnected>.postconnection{
                display:none;
            }
            .quickJoin {
                display: inline-block;
            }
            #quickJoinBlock {
                display: inline-block;
            }
        </style>
        <!--show-->
    </head>
    <body onload="initApp();" >
        <!--hide-->
        <div id="container">
            <div id="header">
                <a href="index.html"><img id="logo_easyrtc" src="images/easyrtc_logo.png" alt="EasyRTC" style="" /></a>
            </div>
            <div id="menu"><a class="menu_link" href="index.html"><div class="menu_item">Local Demos</div></a><a class="menu_link" href="https://github.com/priologic/easyrtc/tree/master/docs"><div class="menu_item">Documentation</div></a><a class="menu_link" href="https://groups.google.com/forum/#!forum/easyrtc"><div class="menu_item">Support: Discussion Group</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></a></div>
            <div id="main">

                <!-- Main Content -->
                <h1>EasyRTC Demo: Instant Messaging + Rooms </h1>
                <p><strong>Note:</strong> This is primarily an application
                    developed to test new features going into EasyRTC Modular (v1.0.x). It's currently not written to be a tutorial,
                    but it does demonstrate how to use various features like presence and room targeted messaging.</p>
                <hr />
                <h2>The Demo</h2>
                <!--show-->
                <div class="preconnection">
                    Username: <input type="text" id="userNameField" />
                    Password: <input type="text" id="credentialField" />
                    <div >
                        <button id="connectButton" onclick="connect();">Connect</button>
                    </div>
                    <hr>
                </div>
                <div class="postconnection">
                    <button onclick="disconnect();">Disconnect from server.</button>
                </div>
                <div>
                    Presence:
                    <input type="radio" name="presence" onclick="setPresence('away');"/>away
                    <input type="radio" name="presence" checked onclick="setPresence('chat');"/>chat
                    <input type="radio" name="presence" onclick="setPresence('dnd');"/>dnd
                    <input type="radio" name="presence" onclick="setPresence('xa');"/>xa
                    <input type="text" onkeyup="updatePresenceStatus(this.value);" />
                </div>
                <hr>
                <div >
                    Quick Join -

                    <div id="quickJoinBlock"></div> <button onclick="refreshRoomList();"> Refresh</button>
                    <button onclick="addRoom(null, null, true);">or join </button>
                    <input id="roomToAdd" type="text" size="20" />
                    <br>
                    Optional room parameters<input id="optRoomParms" type="text" size="20"/>

                </div>

                <div class="postconnection">
                    <hr>
                    <div id="sendMessageArea">

                        <div id="iam">Not connected yet</div>
                        <textarea id="sendMessageText" placeholder="Enter your message here"></textarea>

                        Rooms:
                        <div id="rooms"></div>
                    </div>
                    <div id="receiveMessageArea">
                        Received Messages:
                        <div id="conversation"></div>
                    </div>
                </div>

                <hr>
                <div>

                    <h3> Adding api fields</h3>
                    <input type="text" id="apiroomname" placeholder="room name">
                    <input type="text" id="apifieldname" placeholder="field name"><br>
                    <input size="50" type="text" id="apifieldvalue" placeholder="field value"><br>
                    <button onclick="addApiField()">Add the api field</button>
                </div>

                <div class="postconnection">
                    <hr>
                    <h3>Fields from server</h3>
                    <div id="fields">
                    </div>
                    <hr>
                    <button onclick="easyrtc.getFreshIceConfig();" class="postconnection"> Get Fresh ICE configuration</button>


                    <hr>
                    <h3> Name To Id</h3>
                    <div >
                        <input id="targetName" type="text" />
                        <button onclick="getIdsOfName();">Fetch ids</button>
                        <div id="foundIds"></div>
                    </div>
                </div>

                <!--hide-->
                <hr />
                <h2>Testing the following EasyRTC Features:</h2>
                <ul>
                    <li><strong>Authentication</strong> - If username is provided, it will be available to others to see.</li>
                    <li><strong>Define Rooms during Authentication</strong> - You can join rooms before you press 'Connect'.</li>
                    <li><strong>Default Rooms</strong> - If you join no rooms before you connect, you will join the default room.</li>
                    <li><strong>Messages to All In Room (targetRoom)</strong> - Type a message, then click on a room name to send it to everyone in the same room. When received, the other client will know it was sent to the room at large.</li>
                    <li><strong>Message to Individual In Room (targetRoom + targetEasyrtcid)</strong> - Type a message, then click on another client in a room to send it to just that person. That person will know it was sent directly to them, and that it was sent via a specific room.</li>
                    <li><strong>Presence</strong> - Your presence gets sent to all clients in rooms you share. DND=Do not disturb. XE=Extended Away. The status field can be any string.</li>
                    <li><strong>Delta Lists</strong> - After initial login, the client should only receive changes to who is online.</li>
                </ul>

                <!-- End Main Content -->
            </div>
            <!--hide-->
            <div id="footer">
                <a href="http://www.priologic.com/?from=landing"><img id="logo_priologic" src="images/priologic_logo_white.png" height="40" width="150" alt="Created By Priologic Software Inc." /></a>
                <a href="http://www.easyrtc.com/?from=landing"><img id="logo_pb_easyrtc" src="/easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By EasyRTC" /></a>
                <p><em>&copy; 2014 - Priologic Software Inc., All Rights Reserved.</em></p>
                <p id="license">EasyRTC source code released under a BSD2 License. <a href="https://github.com/priologic/easyrtc/blob/master/LICENSE">See LICENSE file in project folder</a> for details.</p>
            </div>
        </div>
        <script type="text/javascript">

        addQuickJoinButtons({
            room1: {roomName: "room1", numberClients: " "},
            room2: {roomName: "room2", numberClients: " "},
            room3: {roomName: "room3", numberClients: " "}
        }
        );

        </script>
    </body>
</html>
